<template>
	<view class="df-Jc-c" v-if="list.length>2">
		<view class="luckDraw">
			<!--跑马灯-->
			<view class="decorate" :style="{
				width:`${size}rpx`,
				height:`${size}rpx`,
				border: `calc(${size}rpx * 0.05) solid #FABD01`
				}">
				<view v-for="(item,i) in 8" :key="item" :style="{background:flashChange(i)}" />
			</view>
			<!--转盘本身-->
			<view class="turntable" :style="{clipPath: `circle(${height}rpx at 50% 50%)`}">
				<view class="pointer">
					<view class="df-Jc-c df-c" @click="emit('beginBefore')">
						<view class="">
							点击
						</view>
						<view class="">
							抽奖
						</view>
					</view>
					<view class="" />
					<view class="" />
				</view>
				<view class="giftArr" :style="{
					width:`${size}rpx`,
					height:`${size}rpx`,
					transform: `rotate(${result.deg}deg)`,
					transition: result.transition
				}">
					<view class="giftBox  df-c" v-for="(item,index) in list" :key="index"
						:style="[...giftBoxStyle(index)]">
						<view class="">
							{{item.title}}
						</view>
						<image :src="item.image" mode="aspectFill" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed, nextTick, toRaw, onMounted, onUnmounted } from 'vue'

	const emit = defineEmits(['beginBefore', 'result'])
	let throttle = ref(false)
	//转盘大小
	let size = ref(602);
	//转动时间
	let time = ref(1)
	//高即半径
	let height = computed(() => {
		return size.value / 2
	})
	// 求宽高的所需度数
	let degree = computed(() => {
		return 360 / list.value.length / 2
	})
	//闪光
	let flash = ref(false)
	//定时器
	let flashBegin = ref(null)

	//转圈数
	let spin = ref(0)
	const flashChange = (i) => {
		if ((i + 1) % 2) {
			if (flash.value) {
				return '-webkit-radial-gradient(circle closest-side, #FFFFFF 70%, rgba(0, 0, 0, 0) 30%)'
			} else {
				return '-webkit-radial-gradient(circle closest-side, #FFF102 50%, #FC8607 50%)'
			}
		} else {
			if (!flash.value) {
				return '-webkit-radial-gradient(circle closest-side, #FFFFFF 70%, rgba(0, 0, 0, 0) 30%)'
			} else {
				return '-webkit-radial-gradient(circle closest-side, #FFF102 50%, #FC8607 50%)'
			}
		}
	}
	const giftBoxStyle = computed(() => {
		return (i) => {
			let width = Math.tan(degree.value * Math.PI / 180) * height.value * 2
			let pddinglr = (width - Math.sqrt(Math.pow((height.value * 0.85), 2) * 2 - (Math.pow((height
						.value * 0.85),
					2) * 2 *
				Math.cos(degree.value * 2 * Math.PI / 180)))) / 2;
			let styleData = {
				width: `${width}rpx`,
				height: `${height.value}rpx`,
				left: `calc(50% - (${width}rpx / 2))`,
				top: `0rpx`,
				padding: `${height.value * 0.25}rpx ${pddinglr}rpx 0`,
				transform: ` rotateZ(${degree.value*2*i}deg)`
			}
			if (list.value.length % 2 && i == list.value.length - 1) styleData.background = '#FCFAED'
			return styleData
		}
	})
	const init = (data = { size: 602, list: [], time: 1 }) => {
		size.value = data.size
		list.value = data.list
		time.value = data.time
	}
	const begin = (num) => {
		if (throttle.value) return console.log('转盘抽奖中...')
		throttle.value = true
		let index;
		index = Math.floor(Math.random() * list.value.length);
		if (num) index = num;
		if (num == 0) index = num;
		spin.value = spin.value == index + 5 ? 5 - (index || 2) : index +
			5
		result.deg = (spin.value * 360) - (index * degree.value * 2)
		result.giftIndex = index
		result.transition = `all ${time.value}s`
		setTimeout(() => {
			uni.showModal({
				title: "恭喜中奖",
				content: list.value[index].title,
				success: res => {
					throttle.value = false
					emit('result', { type: res.confirm, gift: toRaw(list.value[index]) })
				}
			})
		}, (time.value * 1000))

	}
	let list = ref([])
	let result = reactive({
		deg: 0,
		giftIndex: 0,
		transition: ''
	})
	onMounted(() => {
		nextTick(() => {
			flashBegin.value = setInterval(() => {
				flash.value = !flash.value
			}, 500)
		})
	})
	onUnmounted(() => {
		clearInterval(flashBegin.value)
		flashBegin.value = null
	})
	defineExpose({
		begin,
		init
	})
</script>
<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.df-c {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}

	.df-Jc-c {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.luckDraw {
		position: relative;
		z-index: 1;

		.decorate {
			pointer-events: none;
			z-index: 2;
			position: absolute;
			left: 0;
			top: 0;
			border-radius: 50%;
			background: -webkit-radial-gradient(circle closest-side, rgba(0, 0, 0, 0) 92%, #FC8607 8%);

			>view {
				position: absolute;
				height: 20rpx;
				width: 20rpx;
				border-radius: 10rpx;
			}

			>view:nth-child(1) {
				left: calc(50% - 10rpx);
				top: -23rpx;
			}

			>view:nth-child(2) {
				left: 12%;
				top: 10%;
			}

			>view:nth-child(3) {
				left: -23rpx;
				top: calc(50% - 10rpx);
			}

			>view:nth-child(4) {
				left: 12%;
				bottom: 10%;

			}

			>view:nth-child(5) {
				left: calc(50% - 10rpx);
				bottom: -23rpx;
			}

			>view:nth-child(6) {
				right: 12%;
				bottom: 10%;
			}

			>view:nth-child(7) {
				right: -23rpx;
				top: calc(50% - 10rpx);
			}

			>view:nth-child(8) {
				right: 12%;
				top: 10%;

			}
		}

		.pointer {
			z-index: 3;
			top: calc(50% - 60rpx);
			left: calc(50% - 60rpx);
			position: absolute;
			width: 120rpx;
			height: 120rpx;
			font-size: 22rpx;
			color: #FFFFFF;
			line-height: 30rpx;
			text-align: center;

			>view:nth-child(3) {
				position: absolute;
				z-index: -1;
				bottom: calc(40rpx + 35rpx);
				left: 20rpx;
				height: 80rpx;
				width: 80rpx;
				background: linear-gradient(to right,
						#FABD01 0%,
						#FABD01 50%,
						#E8AF00 50%,
						#E8AF00 100%);

				clip-path: polygon(50% 0, 0 100%, 100% 100%);
			}

			>view:nth-child(2) {
				position: absolute;
				z-index: 2;
				left: 0;
				bottom: 0;
				width: 120rpx;
				background: #FABD01;
				height: 120rpx;
				border-radius: 50%;
				z-index: 1;
			}

			>view:nth-child(1) {
				left: 10rpx;
				bottom: 10rpx;
				position: absolute;
				z-index: 2;
				width: 100rpx;
				background: #F56503;
				border: 4rpx solid #FED860;
				height: 100rpx;
				border-radius: 50%;
			}
		}

		.turntable {
			position: relative;
			display: inline-block;
			border-radius: 50%;
			overflow: hidden;

			.giftArr {
				margin: auto;
				position: relative;

				.giftBox {
					box-sizing: border-box;
					transform-origin: bottom center;
					background: #FC8608;
					position: absolute;
					font-weight: bold;
					clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
					font-size: 24rpx;
					color: #EB7336;
					line-height: 50rpx;
					text-align: center;

					image {
						margin: 0 auto auto;
						height: 70rpx;
						width: 70rpx;
					}

				}

				>view:nth-child(even) {
					background: #FDEBB2;
				}

				>view:nth-child(odd) {
					background: #FFFFFF;
				}
			}
		}
	}
</style>
